<template>
  <el-container style="height: 100%;">
  <el-header style="height: 100px;">Header</el-header>
  <el-container>
    <el-aside width="200px">
      <el-menu 
      default-active=""
      class="el-menu-vertical-demo"
      text-algin="left"
      router
      >
        <el-submenu v-for="m in menulist" :key="m.id + ''" :index="m.id + ''">
          <template slot="title">
          <i :class=m.menuIcon></i>
          <span>{{m.menuName}}</span>
        </template>

        <el-menu-item-group v-for="c in m.childrenMenu" :key="c.id + ''">
          <el-menu-item :index="c.menuRouter + ''"> {{c.menuName}}</el-menu-item>
        </el-menu-item-group>

        </el-submenu>
      </el-menu>
    </el-aside>

    <el-main>
       <router-view></router-view>
    </el-main>

  </el-container>
  
</el-container>

</template>
<script>
export default {
    data(){
      return{
       menulist:'',
      }
    },
    methods:{
      queryMenu(){
        let account = localStorage.getItem('userName');
        //console.log(account)
        this.$axios.get('api/menu/getmenu?account='+localStorage.getItem('userName'),
            {headers:{'jwt':localStorage.getItem('jwt')}})
      .then(res =>{
        //console.log(res.data)
        this.menulist = res.data.data
        //console.log(this.menulist)
      })
      },
    },
    created(){
        this.queryMenu()
    }
}
</script>
<style scoped>
.el-header, .el-footer {
    background-color: #496b99;
    color: #333;
    text-align: center;
    
  }
  
  .el-aside {
    background-color: #0e8369;
    color: #333;
    text-align: center;

    
  }
  
  .el-main {
    background-color: #f8f6f4;
    color: #333;

    
  }

</style>